Röstiteavitused: Ligipääsetavate, kasutajasõbralike ajutiste sõnumite loomine

Digitaalsete liideste kiire tempoga maailmas on suhtlus süsteemi ja selle kasutaja vahel ülioluline. Me toetume visuaalsetele vihjetele, et mõista oma tegevuste tulemusi. Üks levinumaid kasutajaliidese mustreid selle tagasiside jaoks on 'rösti' teavitus – väike, mitte-modaalselt hüpikaken, mis annab ajutist teavet. Olgu see kinnitus "Sõnum saadetud", teatis "Fail üles laaditud" või hoiatus "Ühendus katkes", röstitid on kasutajate tagasiside peenikesed tööhobused.

Kuid nende ajutine ja peen iseloom on kahetšev mõõk. Kuigi mõne kasutaja jaoks minimaalselt pealetükkivad, muudab see iseloomujoon sageli teised, eriti need, kes tuginevad abitehnoloogiatele nagu ekraanilugejad, neile täiesti ligipääsmatuks. Ligipääsmatu rösti teavitus pole lihtsalt väike ebamugavus; see on vaikne viga, jättes kasutajad ebakindlaks ja pettunud. Kasutaja, kes ei saa sõnumit "Seaded salvestatud" tajuda, võib proovida neid uuesti salvestada või lihtsalt rakendusest lahkuda, olles ebakindel, kas nende muudatused õnnestusid.

See põhjalik juhend on mõeldud arendajatele, UX/UI disaineritele ja tootemanejatele, kes soovivad luua tõeliselt kaasavaid digitaalseid tooteid. Uurime rösti teavituste olemuslikke ligipääsetavuse väljakutseid, sukeldume sügavale ARIA (Accessible Rich Internet Applications) abil tehnilistesse lahendustesse ja visandame disainipraktikad, mis on kasulikud kõigile. Õpime, kuidas muuta need ajutised sõnumid ligipääsetava kasutajakogemuse püsivaks osaks.

Rösti teavituste ligipääsetavuse väljakutse

Lahenduse mõistmiseks peame esmalt probleemi põhjalikult mõistma. Traditsioonilised rösti teavitused ebaõnnestuvad sageli mitmel ligipääsetavuse rindel oma peamise disaini põhimõtete tõttu.

1. Need on mööduvad ja ajapõhised

Rösti iseloomulik tunnus on selle kiire kadumine. See ilmub mõneks sekundiks ja kaob siis graatsiliselt. Silmnähtavale kasutajale on see tavaliselt piisavalt aega sõnumi skannimiseks. Ekrani lugeja kasutaja jaoks on see aga märkimisväärne barjäär. Ekraanilugeja teavitab sisu lineaarselt. Kui kasutaja on keskendunud vormivälja või kuulates muud sisu, mis loetakse, võib rösti ilmuda ja kaduda enne, kui ekraanilugeja selle kätte saab. See loob informatsioonilise tühimiku, rikkudes ligipääsetavuse põhiprintsiipi: teave peab olema tajutav.

2. Nad ei saa fookust

Röstitid on mõeldud mitte-pealetükkivateks. Nad ei võta tahtlikult fookust kasutaja praegusest ülesandest. Silmnähtav kasutaja saab sisestada tekstivälja kirjutamist, samal ajal kui "Kujundus salvestatud" sõnum ilmub. Kuid ainult klaviatuuri kasutajatele ja ekraanilugeja kasutajatele on fookus nende peamine navigeerimis- ja interaktsioonimeetod. Kuna rösti ei ole kunagi fookuse järjekorras, on see lineaarse navigeerimisrada jaoks nähtamatu. Kasutaja peaks käsitsi kogu lehe läbi otsima sõnumi jaoks, mida nad isegi ei tea, et see eksisteerib.

3. Nad ilmuvad kontekstist välja

Röstitid ilmuvad sageli ekraani eraldi piirkonda, nagu paremasse ülemisse või vasakusse alumisse nurka, kaugel elemendist, mis neid käivitas (nt "Salvesta" nupp vormi keskel). See ruumiline lahtiühendamine on silmaga kergesti ühendatav, kuid katkestab ekraanilugejate loogilise voo. Teavitamine, kui see üldse toimub, võib tunduda juhuslik ja lahtiühendatud kasutaja viimasest toimingust, põhjustades segadust.

Ühendamine WCAG-ga: Ligipääsetavuse neli sammast

Veebisisu ligipääsetavuse juhised (WCAG) põhinevad neljal põhimõttel. Ligipääsmatud röstitid rikuvad mitmeid neist.

• Tajutav: Kui visuaalse puudega kasutaja ei saa teavitust tajuda, kuna tema ekraanilugeja seda ei teavita, või kui kognitiivse puudega kasutajal pole piisavalt aega selle lugemiseks, pole teave tajutav. See seostub WCAG edukuse kriteeriumiga 2.2.1 Timing Adjustable, mis nõuab, et kasutajatele antakse piisavalt aega sisu lugemiseks ja kasutamiseks.
• Töödeldav: Kui röstit sisaldab tegevust, nagu "Sulge" nupp, peab see olema fookuses ja klaviatuuriga töödeldav. Isegi kui see on informatiivne, peaks kasutajal olema selle üle kontroll, näiteks võimalus see käsitsi sulgeda.
• Mõistetav: Rösti sisu peab olema selge ja konkreetne. Kui ekraanilugeja teavitab sõnumit kontekstist välja, võib selle tähendus olla arusaamatu. See seostub ka WCAG 4.1.2 Nimi, roll, väärtus, mis nõuab, et kasutajaliidese komponendi eesmärk oleks programmiselt määratletav.
• Vastupidav: Teavitus peab olema juurutatud standardsete veebitehnoloogiate abil viisil, mis on ühilduv praeguste ja tulevaste kasutajaagentidega, sealhulgas abitehnoloogiatega. Kohandatud rösti, mis ignoreerib ARIA standardeid, ei ole vastupidav.

Tehniline lahendus: ARIA Live piirkonnad päästavad

Rösti teavituste ligipääsetavaks muutmise võti seisneb ARIA spetsifikatsiooni võimsas osas: live piirkonnad. ARIA live piirkond on lehel element, mille määrate "live". See ütleb abitehnoloogiatele, et nad jälgiksid seda elementi mis tahes sisu muudatuste osas ja teavitaksid neid muudatusi kasutajale, ilma et nende fookust liigutaks.

Pakkides oma rösti teavitused live piirkonda, saame tagada, et nende sisu teavitatakse ekraanilugejate poolt kohe, kui see ilmub, olenemata kasutaja fookusest.

Peamised ARIA atribuudid röstiti jaoks

Kolm peamist atribuuti töötavad koos, et luua röstiti jaoks tõhus live piirkond:

1. Atribuut role

Atribuut `role` määratleb elemendi semantilise eesmärgi. Live piirkondade jaoks on kaaluda kolme peamist rolli:

• role="status": See on kõige tavalisem ja sobivam roll rösti teavituste jaoks. Seda kasutatakse informatiivsete sõnumite jaoks, mis on olulised, kuid mitte kiireloomulised. See vastab aria-live="polite", tähendades, et ekraanilugeja ootab tegevusetuse hetke (nagu lause lõpp) enne teavituse tegemist, tagades, et kasutajat ei katkestata keset ülesannet. Kasutage seda kinnituste jaoks nagu "Profiil uuendatud", "Üksus lisatud ostukorvi" või "Sõnum saadetud".
• role="alert": See roll on reserveeritud kiireloomulise, ajatundliku teabe jaoks, mis nõuab kasutaja kohest tähelepanu. See vastab aria-live="assertive", mis katkestab ekraanilugeja kohe, et sõnumi kohale toimetada. Kasutage seda äärmise ettevaatusega, kuna see võib olla väga häiriv. See sobib veateadete jaoks nagu "Teie seanss on aegumas" või kriitiliste hoiatused nagu "Ühendus kadus". `role="alert"` üleliigne kasutamine on nagu kasutajatele karjumine.
• role="log": See on vähem levinud roll, mida kasutatakse teabe logi loomiseks, kus uued sõnumid lisatakse lõppu, nagu vestluslogid või veakonsoolid. See ei sobi üldiselt tavalistele rösti teavitustele.

2. Atribuut aria-live

Kuigi `role` atribuut sageli viitab teatud `aria-live` käitumisele, saate selle täpsemaks juhtimiseks selgesõnaliselt seada. See ütleb ekraanilugejale, *kuidas* muudatust teavitada.

• aria-live="polite": Ekraanilugeja teavitab muudatusest, kui kasutaja on tegevusetu. See on `role="status"` vaikimisi ja eelistatud seade enamiku röstiti jaoks.
• aria-live="assertive": Ekraanilugeja katkestab kõik, mida ta teeb, ja teavitab muudatusest kohe. See on `role="alert"` vaikimisi.
• aria-live="off": Ekraanilugeja ei teavita muudatusi. See on enamiku elementide vaikimisi.

3. Atribuut aria-atomic

See atribuut ütleb ekraanilugejale, kas teavitada kogu live piirkonna sisu või ainult muutunud osi.

• aria-atomic="true": Kui live piirkonna sisu mõni osa muutub, loeb ekraanilugeja elemendi kogu sisu. See on peaaegu alati see, mida soovite rösti teavituste jaoks, tagades, et täielik sõnum loetakse kontekstis.
• aria-atomic="false": Ekraanilugeja teavitab ainult lisatud või muudetud sõlme. See võib röstiti jaoks põhjustada killustatud ja segaseid teateid.

Kõik kokku: Koodi näited

Vaatame, kuidas seda rakendada. Parim tava on, et DOM-is on lehel laaditud püsiv rösti konteiner. Seejärel lisate ja eemaldate dünaamiliselt üksikuid rösti sõnumeid selle konteineri sees.

HTML struktuur

Asetage see konteiner oma `` tagi lõppu. See on visuaalselt paigutatud CSS-iga, kuid selle asukoht DOM-is ei oma tähtsust ekraanilugeja teavituste jaoks.

            <!-- Viisakas live piirkond standard teavituste jaoks -->
<div id="toast-container-polite" 
     role="status" 
     aria-live="polite" 
     aria-atomic="true">
  <!-- Röstitid lisatakse siia dünaamiliselt -->
</div>

<!-- Kiireloomuline live piirkond kiireloomuliste hoiatus teavituste jaoks -->
<div id="toast-container-assertive" 
     role="alert" 
     aria-live="assertive" 
     aria-atomic="true">
  <!-- Kiireloomulised röstitid lisatakse siia dünaamiliselt -->
</div>
            

              
                Copy
              
            
          

JavaScript viisaka teavituse jaoks

Siin on vanilla JavaScript funktsioon viisaka rösti sõnumi kuvamiseks. See loob rösti elemendi, lisab selle viisakasse konteinerisse ja seab ajaaja selle eemaldamiseks.

            function showPoliteToast(message, duration = 5000) {
  const container = document.getElementById('toast-container-polite');

  // Loo rösti element
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = message;

  // Lisa rösti konteinerisse
  container.appendChild(toast);

  // Sea ajaaja rösti eemaldamiseks
  setTimeout(() => {
    container.removeChild(toast);
  }, duration);
}

// Näide kasutamiseks:
document.getElementById('save-button').addEventListener('click', () => {
  // ... salvestamise loogika ...
  showPoliteToast('Teie seaded on edukalt salvestatud.');
});
            

              
                Copy
              
            
          

Kui see kood töötab, uuendatakse `role="status"` sisaldavat `div`-i. Lehte jälgiv ekraanilugeja tuvastab selle muudatuse ja teavitab: "Teie seaded on edukalt salvestatud", ilma kasutaja töövoogu katkestamata.

Tõeliselt kaasavate röstitite disaini ja kasutajakogemuse parimad praktikad

ARIA tehniline juurutamine on alus, kuid suurepärane kasutajakogemus nõuab läbimõeldud disaini. Ligipääsetav rösti on ka kõigile kasutatavam rösti.

1. Aeg on kõik: Andke kasutajatele kontroll

3-sekundiline rösti võib mõne jaoks sobida, kuid see on nägemispuudega kasutajatele, kes vajavad rohkem aega lugemiseks, või kognitiivsete puudustega kasutajatele, kes vajavad rohkem aega teabe töötlemiseks, palju liiga lühike.

• Pikem vaikimisi kestus: Püüdke minimaalset kestust 5-7 sekundit. See pakub mugavamat lugemisakent laiema kasutajaskonna jaoks.
• Sisaldage "Sulge" nupp: Pakkuge alati selgelt nähtav ja klaviatuuriga ligipääsetav nupp rösti käsitsi sulgemiseks. See annab kasutajatele ülima kontrolli ja hoiab ära sõnumi kadumise enne, kui nad on sellega valmis. Sellel nupul peab olema ligipääsetav etikett, näiteks `<button aria-label="Sulge teavitus">X</button>`.
• Peatamine hiirega/fookuses: Sulgemise taimer peaks peatuma, kui kasutaja liigutab hiire üle rösti või suunab sellele fookuse klaviatuuriga. See on WCAG "Timing Adjustable" kriteeriumi oluline aspekt.

2. Visuaalne selgus ja paigutus

Kuidas rösti välja näeb ja kus see ilmub, mõjutab selle tõhusust oluliselt.

• Kõrge kontrast: Tagage, et rösti tekstil ja taustal oleks piisav värvikontrasti suhe, et täita WCAG AA standardeid (4,5:1 tavalise teksti jaoks). Kasutage värvikombinatsioonide kontrollimiseks tööriistu.
• Selged ikoonid: Kasutage koos tekstiga universaalselt mõistetavaid ikoone (nagu linnuke edukuse jaoks, "i" informatsiooni jaoks või hüüumärk hoiatuse jaoks). Need ikoonid pakuvad kiiret visuaalset vihjet, kuid ärge neile üksi lootke. Lisage alati tekst.
• Järjepidev paigutus: Valige oma röstiti jaoks järjepidev asukoht (nt paremas ülemises nurgas) ja pidage sellest kogu oma rakenduses kinni. See loob kasutajatele ennustatavuse. Vältige röstiti paigutamist nii, et need võivad varjutada olulisi kasutajaliidese elemente.

3. Kirjutage selget ja konkreetset mikroteksti

Sõnum ise on teavituse tuum. Pange see maksma.

• Olge otsene: Minge otse asja juurde. "Toiming viidi edukalt lõpule" asemel kasutage "Profiil uuendatud".
• Vältige žargooni: Kasutage lihtsat, arusaadavat keelt, mida globaalne publik saab kergesti mõista. See on eriti oluline rahvusvaheliste rakenduste jaoks, kus sisu tõlgitakse. Keerulised idioomid või tehnilised terminid võivad tõlkes kaduda.
• Inimsõbralik toon: Kirjutage abivalmis, vestlevas toonis. Sõnum peaks kõlama nagu see pärineks abivalmis assistendilt, mitte külmalt masinalt.

4. Ärge kasutage röstiti kriitilise teabe jaoks

See on kuldreegel. Kui kasutaja PEAB nägema või sellega suhtlema sõnumit, ärge kasutage röstiti. Röstitid on täiendava, mitte-kriitilise tagasiside jaoks. Kriitiliste vigade, kasutajategevust nõudvate valideerimissõnumite või hävitavate toimingute (nagu faili kustutamine) kinnitamise jaoks kasutage vastupidavamat mustrit, nagu modaaldialoog või fookust saav inline hoiatus.

Testige oma ligipääsetavaid rösti teavitusi

Te ei saa olla kindel, et teie juurutamine on ligipääsetav, ilma seda testides koos tööriistadega, mida teie kasutajad tegelikult kasutavad. Käsitsi testimine on kohustuslik dünaamiliste komponentide nagu röstiti jaoks.

1. Ekraanilugeja testimine

Tutvuge kõige levinumate ekraanilugejatega: NVDA (tasuta, Windowsile), JAWS (tasuline, Windowsile) ja VoiceOver (sisseehitatud, macOS ja iOS-ile). Lülitage ekraanilugeja sisse ja tehke toiminguid, mis käivitavad teie röstiti.

Küsige endalt:

• Kas sõnumi teavitati? See on kõige elementaarsem test.
• Kas seda teavitati õigesti? Kas täielik sõnum loeti?
• Kas ajastus oli õige? Viisaka röstiti jaoks, kas see ootas loomulikku pausi? Kiireloomulise hoiatus teavituse jaoks, kas see katkestas kohe?
• Kas kogemus oli häiriv? Kas `role="alert"` kasutamine on põhjendatud või lihtsalt tüütu?

2. Klaviatuuri-ainult testimine

Ühendage oma hiir lahti ja navigeerige saidil ainult klaviatuuri abil (Tab, Shift+Tab, Enter, Tühikuklahv).

• Kui teie röstitil on "Sulge" nupp või muu interaktiivne element, kas saate sellele Tab-klahviga navigeerida?
• Kas saate klahvi Enter või Tühikuklahviga nuppu aktiveerida?
• Kas fookus naaseb pärast röstiti sulgemist loogilisse kohta rakenduses?

3. Visuaalsed ja kasutatavuse kontrollid

• Kontrollige värvikontrasti brauserilaiendi või veebitööriistaga.
• Proovige oma brauseriakna suurust muuta või vaadata erinevatel seadmetel. Kas rösti ilmub ikka mõistlikku kohta, varjutamata muud sisu?
• Paluge kellegil, kes rakendusega pole tuttav, seda kasutada. Kas nad mõistavad, mida rösti teavitused tähendavad?

Kokkuvõte: Ehitame ligipääsetavamat veebi, üks teavitus korraga

Rösti teavitused on väike, kuid oluline osa kasutajakogemusest. Aastaid on need olnud veebiligipääsetavuse tavaline pimedusala, luues abitehnoloogiate kasutajatele frustreeriva kogemuse. Kuid see ei pea nii olema.

Kasutades ARIA live piirkondade jõudu ja järgides läbimõeldud disainipõhimõtteid, saame need kiirelt kaduvad sõnumid muuta barjääridest sildadeks. Ligipääsetav rösti pole lihtsalt tehniline ruut; see on pühendumus selgele suhtlusele *kõigi* kasutajatega. See tagab, et igaüks, olenemata oma võimetest, saab sama kriitilist tagasisidet ja saab meie rakendusi kasutada enesekindlalt ja tõhusalt.

Tehkem ligipääsetavatest teavitustest tööstusharu standard. Juurutades need praktikad oma disainisüsteemidesse ja arendusprotsessidesse, saame ehitada ligipääsetavama, vastupidavama ja kasutajasõbralikuma veebi tõeliselt globaalse publiku jaoks.